<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - StudyAtAI</title>
    <!-- Bootstrap 5 CSS -->
    <link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="{{ url_for('static', filename='vendor/fontawesome/css/all.min.css') }}" rel="stylesheet">
    <!-- 导航栏样式 -->
    <link href="{{ url_for('static', filename='css/navbar.css') }}" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <!-- 背景动画 -->
    <div class="geometric-background">
        <div class="geometric-shape shape1"></div>
        <div class="geometric-shape shape2"></div>
        <div class="geometric-shape shape3"></div>
        <div class="geometric-shape shape4"></div>
        <div class="geometric-shape shape5"></div>
    </div>

    <!-- 导航栏 -->
    {% include 'navbar.html' %}

    <!-- 设置内容 -->
    <div class="container mt-4">
        <h4 class="mb-4 text-white">系统设置</h4>
        
        <!-- 导航标签 -->
        <ul class="nav nav-tabs mb-4" id="settingsTabs" role="tablist">
            <!-- 暂时注释掉用户管理标签
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="user-tab" data-bs-toggle="tab" data-bs-target="#user" type="button" role="tab">用户管理</button>
            </li>
            -->
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="api-tab" data-bs-toggle="tab" data-bs-target="#api" type="button" role="tab">API 设置</button>
            </li>
        </ul>
        
        <!-- 标签内容 -->
        <div class="tab-content" id="settingsTabContent">
            <!-- 用户管理 - 暂时注释掉
            <div class="tab-pane fade show active" id="user" role="tabpanel">
                <div class="card text-white mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">用户列表</h5>
                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#userEditModal">
                            <i class="fas fa-plus"></i> 添加用户
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" data-section="users">
                        </div>
                    </div>
                </div>
            </div>
            -->
            
            <!-- API 设置 -->
            <div class="tab-pane fade show active" id="api" role="tabpanel">
                <div class="card text-white mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">API 配置</h5>
                    </div>
                    <div class="card-body">
                        <form id="apiForm">
                        <div class="mb-3">
                            <label for="apiKey" class="form-label">API Key</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="apiKey" placeholder="请输入 API Key">
                                <button class="btn btn-outline-secondary" type="button" id="toggleApiKey">
                                        <i class="fas fa-eye"></i>
                                </button>
                            </div>
                            <div class="form-text">请妥善保管您的 API Key</div>
                        </div>
                        <div class="mb-3">
                            <label for="apiModel" class="form-label">API 模型</label>
                            <select class="form-select" id="apiModel">
                                    <option value="deepseek-chat">DeepSeek Chat</option>
                            </select>
                        </div>
                            <div class="text-end">
                                <button type="submit" class="btn btn-primary">保存设置</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户编辑模态框 -->
    <div class="modal fade" id="userEditModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content text-white">
                <form id="userForm">
                <div class="modal-header">
                    <h5 class="modal-title">编辑用户</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                        <div class="text-center mb-4">
                            <div class="position-relative d-inline-block">
                                <img src="/static/images/avatar.png" class="rounded-circle mb-2" width="100" height="100" id="avatarPreview">
                                <button class="btn btn-sm btn-primary position-absolute bottom-0 end-0" type="button" id="changeAvatarBtn">
                                    <i class="fas fa-camera"></i>
                                </button>
                                <input type="file" id="avatarInput" accept="image/*" hidden>
                            </div>
                    </div>
                    <div class="mb-3">
                        <label for="userName" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="userName" placeholder="请输入用户名" required>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">性别</label>
                                <div class="d-flex gap-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender" id="genderMale" value="male" checked>
                                        <label class="form-check-label" for="genderMale">
                                            <i class="fas fa-mars me-1"></i>男
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender" id="genderFemale" value="female">
                                        <label class="form-check-label" for="genderFemale">
                                            <i class="fas fa-venus me-1"></i>女
                                        </label>
                                    </div>
                                </div>
                    </div>
                            <div class="col-md-6">
                                <label for="userGrade" class="form-label">年级</label>
                                <select class="form-select" id="userGrade" required>
                                    <option value="">请选择年级</option>
                                    <optgroup label="小学">
                                        <option value="一年级">一年级</option>
                                        <option value="二年级">二年级</option>
                                        <option value="三年级">三年级</option>
                                        <option value="四年级">四年级</option>
                                        <option value="五年级">五年级</option>
                                        <option value="六年级">六年级</option>
                                    </optgroup>
                                    <optgroup label="初中">
                                        <option value="初一">初一</option>
                                        <option value="初二">初二</option>
                                        <option value="初三">初三</option>
                                    </optgroup>
                                    <optgroup label="高中">
                                        <option value="高一">高一</option>
                                        <option value="高二">高二</option>
                                        <option value="高三">高三</option>
                                    </optgroup>
                        </select>
                            </div>
                    </div>
                </div>
                <div class="modal-footer">
                        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
    <!-- Bootstrap 5 JS -->
    <script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <!-- 自定义脚本 -->
    <script src="{{ url_for('static', filename='js/settings.js') }}"></script>
</body>
</html> 